<template>
    <div class="login-box">
      <el-form :model="loginForm" :rules="rules" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="userName">
          <el-input width="100px" type="text" placeholder="输入账号" v-model="loginForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" placeholder="输入密码" v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        userName: '',
        password: ''
      },
      rules: {
        'userName': [

        ]
      }
    }
  },
  methods: {
    login () {
      this.$store.dispatch('saveUser', {user: {
        userName: '张三',
        password: '123456'
      }})

      this.$apis.userService.login(this.loginForm).then(res => {
        console.log(res)
        this.$message({
          type: 'success',
          message: '登录成功'
        })
        // console.log(res)
        // if (res.code === 0) {
        //   this.$message({
        //     type: 'success',
        //     message: '登录成功'
        //   })
        // } else {
        //   this.$message({
        //     type: 'error',
        //     message: '登录失败'
        //   })
        // }
      })
    }
  }
}
</script>

<style>
  .login-box {
    margin: 60px auto;
    padding: 20px;
    width: 350px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
  }

</style>
